<%@ page import="com.xdwanj.util.UrlUtil" %>
<%@ page import="com.xdwanj.pojo.Commodity" %>
<%@ page
        import="com.xdwanj.servlet.CommodityServlet" %><%--@elvariable id="commodity" type="com.xdwanj.pojo.Commodity"--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/jsp/common/head.jsp" %>


<div class="container">
    <div class="row mh-commodity-wrap">
        <%--轮播图--%>
        <div class="col-md-6">
            <div class="carousel-wrap">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <c:if test="${commodity != null}">
                            <c:forEach items="${commodity.pictureList}" var="picture" varStatus="status">
                                <c:if test="${status.index == 0}">
                                    <a href="#" class="item active">
                                        <img src="${pageContext.request.contextPath}${picture.image}"
                                             alt="banner">
                                    </a>
                                </c:if>
                                <c:if test="${status.index != 0}">
                                    <a href="#" class="item">
                                        <img src="${pageContext.request.contextPath}${picture.image}"
                                             alt="banner">
                                    </a>
                                </c:if>
                            </c:forEach>
                        </c:if>
                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button"
                       data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button"
                       data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>

        <%--右侧商品内容--%>
        <div class="col-md-6">

            <%--商品名--%>
            <div class="row">

                <h1 class="col-xs-6">${commodity.name}</h1>
            </div>

            <%--商品信息--%>
            <div class="row">
                <h4 class="control-label col-xs-12">价格: ￥ ${commodity.price}</h4>
                <p class="lead col-xs-12 mh-commodity-info " style="text-indent: 2em;">
                    ${commodity.info}
                </p>
            </div>

            <%--商品提交表单--%>
            <form class="input-group col-xs-6" method="post" action="${pageContext.request.contextPath}<%=UrlUtil.getUrl(CommodityServlet.REQUEST_MAPPING,
            new String[]{CommodityServlet.METHOD, CommodityServlet.ADD_SHOPPING_CART})%>&coid=${commodity.id}">
                    <span class="input-group-btn"><button id="mh-commodity-minus-button"
                                                          class="btn btn-default glyphicon glyphicon-minus"
                                                          type="button"></button></span>
                <input id="mh-commodity-text-num" onkeyup="this.value=this.value.replace(/\D/g,'')"
                       onafterpaste="this.value=this.value.replace(/\D/g,'')" type="text"
                       class="form-control text-center"
                       name="count" value="1">
                <span class="input-group-btn"><button id="mh-commodity-plus-button"
                                                      class="btn btn-default glyphicon glyphicon-plus"
                                                      type="button"></button></span>

                <div class="col-xs-12"><input class="btn btn-default" type="submit" value="加入购物车"></div>
            </form>
        </div>
    </div>
</div>


<%@include file="/jsp/common/foot.jsp" %>
<script src="${pageContext.request.contextPath}/js/commodity.js"></script>
